<div class="foxcms-header-pc foxcms-container foxui-hidden-lg foxui-hidden-md foxui-hidden-sm foxui-hidden-xs">
	<div class="foxcms-logo">
		<div class="logo">
			<img style="height: 60px" src="{fox:basic name='web_logo'/}" alt="" />
		</div>
	</div>
	<div class="foxcms-nav">
		{fox:at value="index" currentstyle="is-current"}
		<dl>
			<dt class="[$field.currentstyle]">
				<a href="{fox:index name='index' /}">首页</a>
			</dt>
		</dl>
		{/fox:at}
		{fox:nav name='field' type="ceils" orderby='level' sortorder='asc' currentstyle="is-current"}
		<dl>
			<dt class="[$field.currentstyle]">
				<a href="[$field.link]">[$field.name]</a>
			</dt>
			<dd>
				{fox:nav name="v" pname="field" notypeid="self" type="son" calltype="parent" currentstyle='is-active'}
				<a href="[$v.link]" class="[$v.currentstyle]">[$v.name]</a>
				{/fox:nav}
			</dd>
		</dl>
		{/fox:nav}
	</div>
</div>
<div class="foxcms-header-h5 foxui-visible-lg foxui-visible-md foxui-visible-sm foxui-visible-xs">
	<div class="nav-mask"></div>
	<div class="nav-content">
		<div class="nav-head foxui-border-bottom">
			<i class="foxui-icon-liebiao-o"></i>
			<a href="/" class="foxcms-logo">
				<img style="height: 26px" src="{fox:basic name='web_logo'/}" alt="" />
			</a>
			<i class="foxui-icon-sousuo-o" style="opacity: 0;"></i>
		</div>
		<div class="nav-menu">
			<div class="nav-menu-inner">
				<ul class="foxui-collapse" data-fold="accordion">
					{fox:nav name='field' type='ceils' orderby='level' sortorder='asc' currentstyle='is-current'}
					<li class="foxui-collapse-item">
						<div class="foxui-collapse-head foxui-collapse-handle">
							<a href="[$field.link]" style="margin-right: 20px">[$field.name]</a>
							<i class="foxui-icon-xiangyou-o foxui-collapse-icon"></i>
						</div>
					</li>
					{/fox:nav}
				</ul>
			</div>
		</div>
	</div>
</div>
<script>
	$(document).on('scroll', function() {
		var scrollTop = $(this).scrollTop();
		if(scrollTop > 100) {
			$('body').addClass('scrolling');
		}else {
			$('body').removeClass('scrolling');
		}
	});
	$(document).on('click', '.foxcms-header-h5 .foxui-icon-liebiao-o', function() {
		let $this = $(this),
			$container = $this.closest('.foxcms-header-h5');
		$container.find('.search-menu').slideUp(300);
		$this.removeClass('foxui-icon-liebiao-o').addClass('foxui-icon-guanbi-o');
		$container.find('.nav-mask').fadeIn(300);
		$container.find('.nav-menu').slideDown(300);
		$('body').css('overflow', 'hidden');
	});
	$(document).on('click', '.foxcms-header-h5 .foxui-icon-guanbi-o', function() {
		let $this = $(this),
			$container = $this.closest('.foxcms-header-h5');
		$this.removeClass('foxui-icon-guanbi-o').addClass('foxui-icon-liebiao-o');
		$container.find('.nav-mask').fadeOut(300);
		$container.find('.nav-menu').slideUp(300);
		$('body').css('overflow', 'auto');
	});

	$(document).on('click', '.foxcms-header-h5 .nav-mask', function() {
		$('.foxcms-header-h5 .foxui-icon-guanbi-o').click();
		let $container = $(this).closest('.foxcms-header-h5');
		if ($container.find('.search-menu').css('display') === 'block') {
			$container.find('.nav-mask').fadeOut(300);
			$container.find('.search-menu').slideUp(300);
			$('body').css('overflow', 'auto');
		}
	});
</script>